<template>
  <div class="mil-src-link">
    <a v-if="urlType == 'typeA'"
       :style="{fontSize: fontSize + 'px' }"
       :href="url"
       @click="updateFontSize"
    >{{urlName}}</a>

    <router-link v-if="urlType == 'typeLink'"
                 :style="{fontSize: fontSize + 'px'}"
                 :to="url"
                 @click="updateFontSize"
    >{{urlName}}</router-link>
  </div>
</template>
<script>
  export default {
      name: 'mil-nav-src',
      props: {
          url: {
              type: String,
              default: 'javascript:alert("空白页面")'
          },
          urlName: {
              type: String,
              default: '链接名字'
          },
          urlType: {
            type: String,
            default: 'typeA'
          }
      },
      data() {
        return {
          fontSize: 12
        }
      },
      methods: {
        updateFontSize(){
          alert("Hello world")

        }
      }
  }
</script>
<style scoped>
    .mil-src-link {
      font-family: "WenQuanYi Micro Hei", "Microsoft YaHei", "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
      border: 0px;
      padding: 0px;
      height: 30px;
      line-height: 30px;
      background-color: red;
      width: 120px;
    }

   .mil-src-link a{
     color: #66801d;
     text-decoration: none;
     transition:font-size 0.5s;
     -moz-transition:font-size 0.5s; /* Firefox 4 */
     -webkit-transition:font-size 0.5s; /* Safari and Chrome */
     -o-transition:font-size 0.5s; /* Opera */
   }

   .mil-src-link > a:hover{
      color: green;
    }
</style>
